<template>
  <div :class="{ hidden: !selfShow }" id="bg">
    <div
      id="mg"
      style="
        width: 550px;
        padding-bottom: 40px;
        margin: 15% auto;
        background: #f3f4f6;
        border-radius: 10px;
      "
    >
      <div class="top">
        <h2>{{ $t("resourceOrder.payConfirm") }}</h2>
      </div>
      <div class="main" style="margin-top: 35px">
        <span
          style="
            margin-left: 70px;
            letter-spacing: 2px;
            display: block;
            width: 420px;
            line-height: 30px;
          "
          >{{ $t("resourceOrder.payDescription") }}</span
        >
        <div style="margin: 15px 98px; display: flex">
          <span
            style="display: block"
            class="amount-text"
            :class="[culture === 'zh-cn' ? '' : 'amount-text-active']"
            >{{ $t("resourceOrder.payAmount") }}</span
          >
          <span style="color: red">￥ {{ payAmount }}</span>
        </div>
        <div style="margin: 15px 98px; display: flex">
          <span
            style="display: block"
            class="amount-text"
            :class="[culture === 'zh-cn' ? '' : 'amount-text-active']"
            >{{ $t("resourceOrder.accountAmount") }}</span
          >
          <span style="color: red">￥ {{ moneyTotal }}</span>
        </div>
        <div>
          <button
            @click="close"
            class="btn6"
            style="margin-top: 15px; margin-left: 98px"
          >
            {{ $t("resourceOrder.cancel") }}
          </button>
          <button
            class="btn6"
            :disabled="blo"
            style="margin-left: 100px"
            @click="giveMoney"
          >
            {{ $t("resourceOrder.confirm") }}
          </button>
        </div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden="tips">
      <img :src="resultIcon" @dragstart="imgdragstart" />
      <span>{{ msg }}</span>
    </div>
  </div>
</template>

<script>
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";
import encryption from "../../common/encryption";

let pressId;
let userId;

export default {
  name: "confirm",
  props: ["payAmount", "orderNo"],
  data() {
    return {
      selfShow: false,
      myTotal: 0,
      resultIcon: "../assets/images/icon_error.png",
      msg: "",
      tips: true,
      moneyTotal: 0,
      orderNum: "",
      blo: false,
      culture: "",
    };
  },
  created() {
    pressId = this.$route.query.pressId;
    userId = this.$route.query.userId;
    this.culture = this.$route.query.culture;
  },
  mounted() {
    /**
     * 打开支付弹窗，并获取账户余额
     */
    let that = this;
    bus.$on("showDetail", function () {
      that.selfShow = true;
      ajax.get({
        url: api.Info.routeName + api.Info.children.account + userId,
        success(res) {
          this.moneyTotal = JSON.parse(encryption.decryptionMxr(res)).userMoney;
          that.moneyTotal = this.moneyTotal;
        },
      });
    });
  },
  watch: {
    /**
     * 监听数据变化，动态获取订单编号
     */
    orderNo(val) {
      this.orderNum = val;
    },
  },
  methods: {
    imgdragstart(e) {
      e.preventDefault();
    },

    onChildClose() {
      this.$emit("listenClose");
    },
    /**
     * 关闭支付弹窗
     */
    close() {
      this.onChildClose();
      this.selfShow = false;
      location.reload(true);
    },

    /**
     * 订单支付
     */
    giveMoney() {
      let that = this;
      let json = {
        orderNo: this.orderNum,
        userId: userId,
      };
      ajax.post({
        url: api.resourceDetail.routeName + api.resourceDetail.children.pay,
        data: json,
        success: function () {
          that.$message({
            message: "支付成功",
            type: "success",
          });
          that.close();
          that.onChildClose();
          location.reload(true);
        },
        fail(res) {
          if (res.ErrCode == 300011) {
            that.blo = true;
            setTimeout(() => {
              that.blo = false;
            }, 3000);
            that.$message({
              message: that.$t("resourceOrder.noAmount"),
              type: "warning",
            });
          } else if (res.ErrCode == 300001) {
            that.$message({
              message: that.$t("resourceOrder.noData"),
              type: "warning",
            });
          } else {
            that.$message({
              message: that.$t("resourceOrder.noService"),
              type: "warning",
            });
          }
        },
      });
      //  that.close();
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 24px;
  color: white;
  margin-left: 12px;
  letter-spacing: 3px;
}

.hidden {
  display: none;
}

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 999;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 2px;
}

.btn6 {
  width: 120px;
  height: 30px;
  border: 1px solid black;
  background: white;
  border-radius: 8px;
}

.tips {
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: fixed;
  top: 0;
  left: 40%;
  width: auto;
  height: 65px;
  z-index: 99;
}

.tips img {
  width: 30px;
  height: 30px;
  position: relative;
  margin-top: 18px;
  margin-left: 66px;
}

.tips span {
  font-size: 15px;
  color: #3c3c3c;
  letter-spacing: -0.05px;
  line-height: 16px;
  display: inline-block;
  position: relative;
  top: -8px;
  margin-left: 13px;
  padding-right: 66px;
}

.btn6:hover {
  cursor: pointer;
}

.top {
  text-align: center;
}

.amount-text {
  width: 145px;
}

.amount-text-active {
  width: 205px;
}
</style>
